<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh">

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<head>
 <base href="<%=basePath%>">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="email=no">
  <title>申请退货</title>
  <link href="http://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link href="static/css/style.css" rel="stylesheet"></head>

<body>
  <div class="content content-refund">
    <div class="wrapper">
      <div class="refund-goods ui-1px-b">
        <!-- 多件商品时 显示-->
        <div class="swiper-container">
          <div class="swiper-wrapper">
          	<c:forEach items="${ogList }" var="og">
          	<div class="swiper-slide photo100"><img src="${og.goodsThumb }" alt=""></div>
          	</c:forEach>
          </div>
        </div>

      </div>
     
      <div class="goods-money tr f28 bgwh ui-1px-b">
        <span class="f24 g9">实付款：</span>￥${order.realPrice }
      </div>
	   <form enctype="multipart/form-data" method="post" id="refundform">
	   <input name="orderCode" value="${order.orderCode }" type="hidden">
      <div class="cell refund-money mt20 ui-1px-t ui-1px-b bgwh">
        <div class="cell__hd f30"><span>退款金额：</span><span class="text-primary on-select-money">¥0</span></div>
        <div class="cell__bd tr">
          <div class="dib vm f0 on-show"><span class="dib vm f24 g9">退款说明</span>
            <i class="dib vm ion-ios-help-outline f40 ml10 lh0"></i></div>
        </div>
      </div>
      <!-- 活动规则 -->
      <div class="refund-rules on-show-target dn">
        <ul class="g6">
          <li class="item f22">当商品确认收货后，不予以退货服务；</li>
          <li class="item f22">当商品未发货时进行退货，将退还商品金额；</li>
          <li class="item f22">当商品发货后进行退货，将退还商品金额的90%；</li>
        </ul>
      </div>
     
      <!-- 选择退货商品 -->
      <div class="order-goods bgwh ui-1px-t ui-1px-b">
        <div class="cell refund-money mt20 bgwh">
          <div class="cell__hd f30 g6">请选择需要换货的商品</div>
          <div class="cell__bd tr">
            <div class="dib vm f0 on-select-btn pointer"><span class="dib vm f24 g9">全选</span>
              <i class="dib vm ion-ios-checkmark-outline ion-ios-circle-outline f40 ml10"></i></div>
          </div>
        </div>
        <ul class="list ui-1px-t">
          <c:forEach items="${ogList }" var="og">
          	<li class="item ell on-select-target pointer goods-select" goods-id="${og.goodsId }" data-money="${og.returnPrice }">
              <i class="dib vm ion-ios-checkmark-outline ion-ios-circle-outline"></i>
              <span class="dib vm f28">${og.title }</span>
            </li>
          </c:forEach>
        </ul>
      </div>

      <!-- 问题描述 -->
      <div class="problem bgwh mt20 pb20 ui-1px-t">
        <p class="f28 pl20 pt20 pb20">问题描述 </p>
        <div class="textarea rel">
          <textarea class="textarea__style f24 on-textarea" name="asq.content" rows="8" placeholder="请您在此描述问题"></textarea>
          <span class="tips-number abs f22 g9 on-textarea-limit" data-limit="500">0</span>
        </div>
      </div>
      </form>
      
       <!-- 上传图片 -->
        <div class="update-list pt20 f0 pl20 pr20 bgwh ui-1px-b">
          <label class="update-item update-default dib vm on-update-pic" for="update-file">
            <input class="update-file" id="update-file" type="file"  accept="image/png,image/jpeg,image/jpg">
          </label>
        </div>
      
      <!-- 提示 -->
      <p class="point-info g6 mt20 tc">
        <span class="icon-information dib vm ml20"></span>
        <span class="f22 dib vm">提交退款信息后，售后专员可能与您电话联系，请保持手机畅通</span>
      </p>
      <div class="mt20 mb20 pb20 pb20"></div>
      <div class="tc mt20">
        <a class="btn btn__primary f32 white ml20 mr20 db" id="submit-btn" href="javascript:;">提交</a>
      </div>
      <div class="mt20 mb20 pb20 pb20"></div>

    </div>
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="static/js/lib/layer_mobile/layer.js"></script>
  <script>

      var files,type;
      $('#submit-btn').on("click", function () {

    	//判断参数
    	var returnPrice = $('.on-select-money').html().slice(1);
    	if(returnPrice <= 0){
    		layer.open({
    		    content: '请选择商品'
    		    ,btn: '我知道了'
    		  });
    		return;
    	}
    	
        if($(".goods-select.active").length == 0){
        	layer.open({
    		    content: '请选择商品'
    		    ,btn: '我知道了'
    		  });
    		return;
        }
    	
        files = [];
        getBase64(files)
        var formobj =  document.getElementById("refundform");
        var formData = new FormData(formobj);
        
        $.each(files,function(i,file){
        	formData.append("imgs",file);
        }); 
        
        
       

       $.each($(".goods-select.active"),function(i,obj){
    	   formData.append("goodsIds",$(obj).attr("goods-id"));
       });
       formData.append("asr.returnPrice",returnPrice);
       var isAllRefund = '00';
       if($('.on-select-btn.active').length > 0){
    	   isAllRefund = '01';
       }
       formData.append("asr.isAllRefund",isAllRefund);
       
       
       var load = layer.open({type: 2,shadeClose:false});
        $.ajax({
        	  url: "wap/order/refund/apply",
        	  type: "POST",
        	  data: formData,
        	  processData: false,  
        	  contentType: false,
        	  success : function(data) {
        		  var state = data.result.state;
        		  layer.close(load);
        		  if(state == 1){
        			 var code = data.code;
        			 layer.open({
        				    title: '提示',
        				    content: data.result.message,
        				    btn: ['我知道了'],
        			 		yes: function(index){
 				    			location.href="wap/order/refund/detail?code="+code;
 				    		}
        			});
        		  }else{
        			
      				layer.open({
      				    title: '提示',
      				    content: data.result.message,
      				    btn: ['我知道了']
      				});
        		  }
        	  }
        	});
      
      })


    function getBase64(files) {
      var items = document.querySelectorAll('.update-item')
      for (var i = 0; i < items.length - 1; i++) {
        var oImg = items[i].querySelector('img')
        var base64 = oImg.src;
        files.push(blobFile(base64))
      }
    }

    function blobFile(base64) {
      var baseArr = base64.split(",");
      var fileType = baseArr[0].match(/:(.*?);/)[1];
      var cont = atob(baseArr[1]);
      var n = cont.length;
      var u8Arr = new Uint8Array(n);
      var blob;
      while (n--) {
        u8Arr[n] = cont.charCodeAt(n);
      }
      blob = new Blob([u8Arr], { type: fileType });
      return blob;
    }
  </script>
<script type="text/javascript" src="static/js/lib/vendor.js"></script><script type="text/javascript" src="static/js/lib/app.js"></script>
</body>

</html>
